package com.iot.ammeter.ui.components.device_bind

import android.content.res.Configuration
import androidx.compose.foundation.layout.*
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import com.iot.ammeter.model.view.SelectorItem
import com.iot.ammeter.ui.theme.AmmeterAppTheme

/**
 * 自定义下拉列表选择器，组件外层使用 Box 包裹。
 * 采用 [OutlinedButton] + [DropdownMenu] 的实现方式，
 * 其中 OutlinedButton 使用 Material 3 版本，
 * 而 DropdownMenu 由于在 Material 3 版本中还没有对应组件实现，
 * 因此采用 androidx.compose.material 包下的组件
 *
 * @param modifier 组件最外层 Box 的 Modifier
 * @param defaultText 组件默认按钮文字
 * @param items 下拉列表元素
 * @param onSelect 当某一个 item 被选中时的回调事件
 */
@Composable
fun <T> DropdownSelector(
    modifier: Modifier = Modifier,
    defaultText: String = "请选择",
    items: List<SelectorItem<T>>,
    onSelect: (T) -> Unit = {},
) = Box(modifier) {
    var expanded by remember { mutableStateOf(false) }
    var buttonText by remember { mutableStateOf(defaultText) }
    var width by remember { mutableStateOf(0) }
    OutlinedButton(modifier = Modifier
        .fillMaxWidth()
        .onGloballyPositioned {
            // 获取测量后的 Button 宽度
            width = it.size.width
        }, onClick = { expanded = true }) {
        Text(text = buttonText)
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier.width(
            // 使用 Button 的宽度
            with(LocalDensity.current) {
                width.toDp()
            })
    ) {
        items.forEach { item ->
            DropdownMenuItem(
                onClick = {
                    buttonText = item.text
                    onSelect(item.value)
                    expanded = false
                }) {
                Text(text = item.text)
            }
        }
    }
}

@Composable
@Preview("light", showBackground = true)
@Preview("night", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
fun DropdownSelectorPreview() = AmmeterAppTheme {
    val items = mutableListOf<SelectorItem<Int>>()
    repeat(10) {
        items.add(SelectorItem(it.toString(), it))
    }
    DropdownSelector(items = items)
}